<template>
    <div>
        <h1>显示</h1>
        店铺名称:
        <input type="text" v-model="cha.Name">
        房屋状态
        <select v-model="cha.SId">
            <option value="0">请选择</option>
            <option v-for="a in bang" :value="a.SId">{{ a.SName }}</option>
        </select>
        <input type="button" value="查询" @click="Show">
        <input type="button" value="重置" @click="Chong">
        <table class="table">
            <thead>
                <tr>
                    <td>编号</td>
                    <td>楼层</td>
                    <td>店铺名称</td>
                    <td>建筑面积</td>
                    <td>店铺面积</td>
                    <td>租金</td>
                    <td>状态</td>
                    <td>联系方式</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="a in data">
                    <td>{{a.Id}}</td>
                    <td>{{a.Lou}}</td>
                    <td>{{a.Name}}</td>
                    <td>{{a.Mian}}</td>
                    <td>{{a.Shi}}</td>
                    <td>{{a.Price}}</td>
                    <td style="color: green;">{{a.SName}}</td>
                    <td>{{a.Bei}}</td>
                    <td>
                        <input type="button" value="逻辑删除" @click="HDel(a.Id)">
                        <input type="button" value="编辑" @click="Fan(a.Id)">
                    </td>
                </tr>
            </tbody>
        </table>
        一共{{page.zys}}页，一共{{page.zhs}}行，第{{cha.Pageindex}}页，每页{{cha.Pagesize}}行
        <input type="button" value="首页" @click="fy(1)">
        <input type="button" value="上一页" @click="fy(2)">
        <input type="button" value="下一页" @click="fy(3)">
        <input type="button" value="尾页" @click="fy(4)">
        页容量
        <select v-model="cha.Pagesize" @click="yrl">
            <option value="2">请选择</option>
            <option value="3">3</option>
            <option value="5">5</option>
            <option value="7">7</option>
            <option value="10">10</option>
        </select>
        <input type="text" v-model="cha.Pageindex"><input type="button" value="跳转" @click="tz">
    </div>
</template>

<script setup lang="ts">

import { ref ,onMounted} from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';
onMounted(()=>{
    Show()
    xia()
})
const data = ref([{
    "Id": 1,
      "Lou": "7",
      "Name": "青叶投资",
      "Mian": 255,
      "Shi": 250,
      "Price": 1000,
      "Bei": "13056869856",
      "IsDelete": true,
      "SId": 1,
      "SName": "出租中"
}])
//下拉框
const bang = ref([{
    "SId": 1,
    "SName": "出租中"
}])
const xia = ()=>{
    axios.get('https://localhost:7250/api/Shop/Xia').then(res=>{
        bang.value = res.data;
    })
}

const cha  = ref({
    Pageindex:1,
    Pagesize:2,
    SId:0,
    Name:""
})
//重置
const Chong = ()=>{
    cha.value.SId=0,
    cha.value.Name="",
    Show()
}
const page = ref({
    zys:1,
    zhs:2
})
const fy=(e:any)=>{
    if(e==1){
        cha.value.Pageindex=1;
        Show()
    }
    if(e==2){
        if(cha.value.Pageindex>1){
            cha.value.Pageindex-=1;
            Show()
        }
    }
    if(e==3){
        if(cha.value.Pageindex<page.value.zys){
            cha.value.Pageindex+=1;
            Show()
        }
    }

    if(e==4){
        cha.value.Pageindex=page.value.zys
        Show();
    }
}
const yrl = ()=>{
    Show()
}
const tz = ()=>{
    Show()
}


const Show = ()=>{
    axios.get('https://localhost:7250/api/Shop/SShow',{params:cha.value}).then(res=>{
        data.value = res.data.list;
        page.value.zhs = res.data.count;
        page.value.zys = Math.ceil(page.value.zhs/cha.value.Pagesize);
    })
}

//逻辑删除
const HDel = (e:any)=>{
    if(confirm('确定删除吗？')){
        axios.delete('https://localhost:7250/api/Shop/SDel',{params:{Id:e}}).then(res=>{
            if(res.data>0){
                alert('删除成功');
                Show()
            }
            else{
                alert('删除失败')
            }
        })
    }
    
}



//修改
const router = useRouter();
const Fan = (e:any)=>{
    router.push({path:"/Upd",query:{Id:e}});
}



</script>

<style scoped>

</style>